import { PageContainer } from '@ant-design/pro-components';
import { center } from '@antv/g2plot/lib/plots/sankey/sankey';
import { Card, Col, Row, Space } from 'antd';
import LiuChengTUImage from '../../../public/img/welcom_liuchengtu.jpg';
import CompareChartsDemo from './Column';
import CompareDonutChart from './CompareDonutChart';
import ComparePieChart from './ComparePieChart ';
import LiquidPlot from './LiquidChart';
import CompareScatterChartsDemo from './Scatter';

const Welcome = () => {
  return (
    <>
      <PageContainer>
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
          <Row gutter={24}>
            <Col span={18}>
              <Card>
                <img
                  src={LiuChengTUImage}
                  alt=""
                  style={{
                    display: center,
                    width: 660,
                  }}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card title="今日生产进度">
                <LiquidPlot
                  ids={1}
                  color={'#A595FE'}
                  percent={0.1}
                  textinfo={'当前进度'}
                  size={220}
                />
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={8}>
              <Card title="今日冰箱生产占比">
                <CompareDonutChart
                  id={3}
                  datasouce={[
                    { type: '冰箱a', value: 260 },
                    { type: '冰箱b', value: 200 },
                    { type: '冰箱c', value: 500 },
                  ]}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card title="今日热水器生产占比">
                <CompareDonutChart
                  id={4}
                  datasouce={[
                    { type: '热水器a', value: 100 },
                    { type: '热水器b', value: 145 },
                    { type: '热水器c', value: 188 },
                  ]}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card title="今日空调生产占比">
                <CompareDonutChart
                  id={5}
                  datasouce={[
                    { type: '空调a', value: 110 },
                    { type: '空调b', value: 170 },
                  ]}
                />
              </Card>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Card title="产线状态">
                <ComparePieChart />
              </Card>
            </Col>
            <Col span={12}>
              <Card title="车辆状态">
                <CompareChartsDemo />
              </Card>
            </Col>
          </Row>
          <Card title="订单总数量">
            <CompareScatterChartsDemo />
          </Card>
        </Space>
      </PageContainer>
    </>
  );
};

export default Welcome;
